<template>
  <div class="songs">
    <div class="top">
      <span class="iconfont"
        @click="tag=0"
        :class="{active:tag==0}">全部</span>
      <span class="iconfont"
        @click="tag=7"
        :class="{active:tag==7}">华语</span>
      <span class="iconfont"
        @click="tag=96"
        :class="{active:tag==96}">欧美</span>
      <span class="iconfont"
        @click="tag=8"
        :class="{active:tag==8}">日本</span>
      <span class="iconfont"
        @click="tag=16"
        :class="{active:tag==16}">韩国</span>
    </div>
    <table class="el-table playlit-table">
      <thead>
        <th></th>
        <th></th>
        <th>音乐标题</th>
        <th>歌手</th>
        <th>专辑</th>
      </thead>
      <tbody>
        <tr class="el-table__row"
          v-for="(item,index) in lists"
          :key="index">
          <td>{{index+1}}</td>
          <td>
            <div class="img-wrap">
              <img :src="item.album.picUrl"
                alt />
              <span @click="playMusic(item.id)"
                class="iconfont icon-play el-icon-video-play"></span>
            </div>
          </td>
          <td>
            <div class="song-wrap">
              <div class="name-wrap">
                <span>{{item.name}}</span>
                <span class="iconfont icon-mv"></span>
              </div>
            </div>
          </td>
          <td>{{item.album.artists[0].name}}</td>
          <td>{{item.album.name}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  watch: {
    tag() {
      this.getlists();
    },
  },
  data() {
    return {
      lists: [],
      tag: "0",
    };
  },
  created() {
    this.getlists();
  },
  methods: {
    getlists() {
      axios({
        url: "https://autumnfish.cn/top/song",
        method: "get",
        params: {
          limit: "20",
          type: this.tag,
        },
      }).then((res) => {
        this.lists = res.data.data;
      });
    },
    playMusic(id) {
      axios({
        url: "https://autumnfish.cn/song/url",
        method: "get",
        params: {
          id,
        },
      }).then((res) => {
        let url = res.data.data[0].url;
        //console.log(url);
        this.$store.state.musicUrl = url;
      });
    },
  },
};
</script>

<style scoped>
.songs {
  width: 1100px;
  margin: 0 auto;
}
.songs .top {
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.songs .top > span {
  padding: 10px;
}
.songs .top .active {
  color: orangered;
}

.el-table {
  border-bottom: none;
  border-collapse: collapse;
}

.el-table.playlit-table th:nth-child(2) {
  width: 150px;
}

.el-table.playlit-table th:nth-child(3) {
  width: 300px;
}

.el-table.playlit-table th:nth-child(4) {
  width: 300px;
}

.el-table tbody {
  border-bottom: none;
}

.el-table td {
  border-bottom: none;
}

.el-table td:first-child {
  padding-left: 30px;
}
.el-table td:nth-child(2) {
  padding-left: 20px;
}

.el-table th {
  font-weight: normal;
}

.el-table th:first-child {
  width: 50px;
}

.el-table th:nth-child(2) {
  width: 300px;
}

.el-table th:nth-child(3) {
  width: 200px;
}

.el-table .song-wrap > span {
  margin-top: 20px;
  display: inline-block;
  color: #bebebe;
}

.el-table .song-wrap .icon-mv {
  padding-left: 5px;
  color: #dd6d60;
}

.el-table .img-wrap {
  position: relative;
  width: 70px;
  height: 70px;
}

.el-table .img-wrap img {
  width: 70px;
  height: 70px;
  border-radius: 5px;
}

.el-table .img-wrap .icon-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  color: #dd6d60;
  font-size: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
}

.el-table .img-wrap .icon-play::before {
  transform: translateX(1px);
}

.el-table tr:nth-child(2n) {
  background-color: #fafafa;
}

.el-table tr:hover {
  background-color: #f5f7fa;
}
.el-table th,
.el-table tr {
  background-color: rgba(124, 124, 124, 0.1);
}
</style>